<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
路由：根据请求的路径按照一定的路由规则进行请求的转发从而实现统一请求的管理。
路由的作用：用来在 Vue 中实现 组件之间的动态切换。
路由的基本使用：
    1.创建组件对象；
    2.定义路由对象的规则；
    3.将路由对象注册到 vue 实例；
    4.在页面中显示路由的组件；
    5.根据链接切换路由；
<div id="app">
    <!--4.在页面中显示路由的组件-->
    <router-view></router-view>
    <!--5.根据链接切换路由组件，必须加上#号才会被路由识别-->
    <a href="#/login">点我登录</a>
    <a href="#/register">点我注册</a>
</div>
<script>
    //1.创建组件对象
    let login = {
        template: "<h1>登录</h1>"
    };
    let register = {
        template: "<h1>注册</h1>"
    };

    //2.创建路由对象，路由对象可以对地址栏监听，根据地址栏的地址切换不同的组件
    let router = new VueRouter({
        routes: [// 定义路由对象的规则
            // path:设置路由的路径, component:路径对应的组件
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    });

    let app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router //3.在vue实例中注册路由对象
    });
</script>
</body>
</html>